<script setup lang="ts">
import { ref } from 'vue'
import { useClipboard } from '@vueuse/core'

const source = ref('明天要上课了')
const { text, copy, copied, isSupported } = useClipboard({ source })
</script>

<template>
  <div class="notify-page">
    <div v-if="isSupported">
      <button @click="copy(source)">
        <span v-if="!copied">复制</span>
        <span v-else>复制成功</span>
      </button>
      <p>
        复制的内容: <code>{{ text || 'none' }}</code>
      </p>
    </div>
    <p v-else>Your browser does not support Clipboard API</p>
  </div>
</template>

<style lang="scss" scoped></style>
